<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../inclued/base.jsp" %>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<!-- Always force latest IE rendering engine or request Chrome Frame -->
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/animate.min.css">
	<title>首页</title>
  <style type="text/css">
    body{
      background: url("img/bg-login.jpg") fixed;
      background-size: 100%;
      margin: 0px;
      padding: 0px;
    }
    .login-bg{
      margin: 100px auto 0 auto;
      height: 400px;
      background: rgba(0,0,0,.7);
      vertical-align: baseline;
    }
    .form-signin {
      max-width: 300px;
      padding: 19px 29px 29px;
      margin: 0 auto 20px;
      color:#fff;
      -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
              border-radius: 5px;
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
         -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
              box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    .form-signin .form-signin-heading,
    .form-signin .checkbox {
      margin-bottom: 10px;
    }
    .form-signin input[type="text"],
    .form-signin input[type="password"] {
      font-size: 16px;
      height: auto;
      margin-bottom: 15px;
      padding: 7px 9px;
    }
    .login-form{
      -vendor-animation-duration: 2s;
      -vendor-animation-delay: 3s;
      -vendor-animation-iteration-count: infinite;
    }
  </style>
</head>
<body>


  <div class="login-bg">
    <form action="/admin/login.jspx" method="post" class="form-signin login-form"  >
        <h2 class="form-signin-heading">
          Book Store
        </h2>
        <c:choose>
        	<c:when test="${param.statu=='10001'}">
        		 <div class="alert" >
				  <button type="button" class="close" data-dismiss="alert">&times;</button>
				  <strong>注意</strong> 账号密码输入错误
			  </div>
        	</c:when>
        	<c:when test="${param.statu=='10002'}">
        		 <div class="alert" >
				  <button type="button" class="close" data-dismiss="alert">&times;</button>
				  <strong>注意</strong> 请先输入账号密码
			  </div>
        	</c:when>
        </c:choose>
        <div class="hidden" id="warn">
          <div class="alert" >
			  <button type="button" class="close" data-dismiss="alert">&times;</button>
			  <strong>注意</strong> 账号或者密码不能为空
		  </div>
        </div>
        
       账号:<input type="text" name="username" class="input-block-level" id="username"  >
       密码: <input type="password" name="pwd" class="input-block-level" id="pwd" >
        <button class="btn btn-large btn-block btn-success" type="button">进入</button>
    </form>
  </div>

  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".login-form").addClass("animated fadeInDown");
      $(".btn").click(function(){
		if($("#username").val()!="" && $("#pwd").val()!=""){
			 $("form").submit();
		}else{
			$("#warn").attr("class","show");
			window.setTimeout(function(){
				$("#warn").attr("class","hide");
			}, 2000)
			
		}
        /* $(".login-form").removeClass("animated fadeInDown");
        $(".login-form").addClass("animated shake");
        window.setTimeout( function(){$('.login-form').removeClass("animated shake")},1300);
  */

      });
    });
  </script>

</body>
</html>
